<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../三段/五月/jquery/jquery.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
</head>
<style>
  .con {
      margin: auto;
      margin-top: 30px;
    }
    .se {
      width: 150px;
      float: left;
    }
    .tableclass {
      margin-top: 30px;
    }
    li {
      border: 1px solid #ccc;
      list-style: none;
      width: 100px;
      height: 30px;
      float: left;
      text-align: center;
    }
    th,
    td {
      text-align: center;
    }
    .modal-content {
      width: 900px;
    }
    .c-div {
      width: 900px;
      margin: auto;
    }
    .s-div {
      width: 900px;
      margin: auto;
    }
</style>

<body>
    <div class="c-div">
      <h1>学生成绩管理</h1>
      <select class="form-control se" id="classList"></select>
      <select class="form-control se" id="stage">
        <option value="">请选择阶段</option>
        <option value="0">一段</option>
        <option value="1">二段</option>
        <option value="2">三段</option>
        <option value="3">四段</option>
        <option value="4">五段</option>
        <option value="5">六段</option>
        <option value="6">实训毕业段</option>
      </select>
      <!-- Button trigger modal -->
      <button
        type="button"
        class="btn btn-default"
        data-toggle="modal"
        data-target="#saveClassModal"
        id="class-manage"
      >
        班级管理
      </button>

      <!-- Modal -->
      <div
        class="modal fade"
        id="saveClassModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title" id="myModalLabel">班级列表</h4>
            </div>
            <div class="modal-body">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>班级ID</th>
                    <th>班级名称</th>
                    <th>备注选项</th>
                    <th>添加时间</th>
                    <th>操作管理</th>
                  </tr>
                </thead>
                <tbody id="tbd-class"></tbody>
              </table>
              <button type="button" class="btn btn-default" id="add-class">
                添加班级
              </button>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                关闭
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学生成绩列表 -->
    <div class="s-div">
      <table class="table table-bordered tableclass">
        <thead>
          <tr>
            <th rowspan="2" style="line-height: 55px">姓名</th>
            <th>第一周</th>
            <th colspan="3">第二周</th>
            <th>第三周</th>
            <th colspan="3">第四周</th>
            <th rowspan="2" style="line-height: 55px">月平均分数</th>
            <th rowspan="2" style="line-height: 55px">末位次数</th>
            <th rowspan="2" style="line-height: 55px">操作</th>
          </tr>
          <tr>
            <th>机试分数</th>
            <th>笔试分数</th>
            <th>机试分数</th>
            <th>平均分数</th>
            <th>机试分数</th>
            <th>笔试分数</th>
            <th>机试分数</th>
            <th>平均分数</th>
          </tr>
        </thead>
        <tbody id="tbd-student"></tbody>
      </table>
      <button
        class="btn btn-default"
        data-toggle="modal"
        data-target="#addStudentModal"
        id="add-student"
      >
        添加学生
      </button>
      <div
        class="modal fade"
        id="addStudentModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-hidden="true"
              >
                &times;
              </button>
              <h4 class="modal-title" id="myModalLabel">添加学生</h4>
            </div>
            <div class="modal-body">
              学生姓名:
              <input
                type="text"
                id="studentName"
                class="form-control"
                style="width: 180px"
              />
              <br />
              请选择班级:
              <select
                class="form-control"
                style="width: 180px"
                name=""
                id="add-se1"
              ></select
              ><br />
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                关闭
              </button>
              <button type="button" class="btn btn-primary" id="saveStudent">
                确定添加
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
      </div>
    </div>
</body>
<script>
    // var grades = []
    var ID
    $(function () {
        $('#class-manage').click(saveClassModal)
        $('#saveClass').click(saveClass)
        $('#add-class').click(addNewClass)
        // 显示班级类表
        showClassList()
    })
    // 添加一个班级
    function addNewClass() {
        var strHtml = `<tr class="new-class">
                            <td>ID</td>
                            <td><input type="text" id="newClass" placeholder="班级名称"></td>
                            <td><input type="text" placeholder="备注（可选）"></td>
                            <td>添加时间</td>
                            <td>
                                <button class="btn btn-default" onclick="showClassModal()">取消添加</button>
                                <button class="btn btn-default" onclick="saveClass()">确定添加</button>
                            </td>
                        </tr>`
        $('#tbd-class').append(strHtml)
    }
    // 显示列表模态框
    function showClassModal() {
        var classList = getData('classList')
        var html = ''
        for (let i in classList) {
            html += `<tr>
                        <td>${classList[i].id}</td>
                        <td>${classList[i].className}</td>
                        <td>${classList[i].markClass}</td>
                        <td>${classList[i].created_at}</td>
                        <td><button class="btn btn-default" onclick="delClass(${i})">删除</button></td>
                    </tr>`
        }
        $('#tbd-class').html(html)
    }
    // 显示班级类表
    function showClassList() {
        var classList = getData('classList')
        var str = '<option value="">请选择班级</option>'
        for (let i in classList) {
            str += `<option value="">${classList[i]}</option>`
        }
        $('#year').html(str)
    }
    // 添加班级
    function saveClass() {
        var newClass = $('#newClass').val()
        var markClass = $('#markClass').val()
        if (!newClass) {
            alert('请输入班级名称')
            return
        }
        var id = getId()
        var created_at = getNowTime()
        var dataObj = {
            id:id,
            className:newClass,
            markClass:markClass,
            created_at:created_at
        }
        addData('classList', newClass)
        showClassList()
        // $('#saveClassModal').modal('hide')
        showClassModal()
    }


    // 获取本地数据
    function getData(key) {
        return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : []
    }
    // 删除本地数据
    function delData(key, index) {
        let data = getData(key)
        data.splice(index, 1)
        setData(key, data)
    }
    // 设置更新本地数据
    function setData(key, data) {
        localStorage.setItem(key, JSON.stringify(data))
    }
    // 追加本地数据
    function addData(key, data = {}) {
        let localData = getData(key)
        localData.push(data)
        setData(key, localData)
    }
    // 生成自增ID
    function getId() {
        ID = getData('id') ? Number(getId('id')) : 0
        ID++
        setData('id', ID)
        return ID
    }
    // 获取当前时间
    function getNowTime(){
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.Date()
        var hour = date.getHours()
        var minute = date.getMinutes()
        var secound = date.getSeconds()
        return (year + '-' + month + '-' + day + '' + hour + ':' + minute + ':' + secound)
    }
</script>

</html>